<template>
  <div>

    <el-container>
      <!--      引入我们的导入导航栏
      （引入我们的组件进行我们的组件的复用性
      使得我们的代码不至于那么的冗余）-->
      <nav-menu></nav-menu>
      <el-container>

        <div class="header-avatar">
          <el-avatar size="medium" src="./static/img/可爱皮卡.jpg" style="float: right"></el-avatar>
          <el-dropdown style="float: right">
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <!--   这个是使我们的点击事件失效 就是可以不进行我们的默认的事件触发           -->
              <el-dropdown-item @click.native="exit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!--  这个是我们的头部位置      -->

        <el-header>
          <div>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">处理中心</el-menu-item>
              <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                  <template slot="title">选项4</template>
                  <el-menu-item index="2-4-1">选项1</el-menu-item>
                  <el-menu-item index="2-4-2">选项2</el-menu-item>
                  <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="3" disabled>消息中心</el-menu-item>
              <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
            </el-menu>
          </div>
        </el-header>

        <!--主部位-->
        <el-main>
          <!-- 如果你想要你的子路显示出来的话 我们就可以进行数据的
          我们必须写出来我们的router-view才行-->

          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>


  </div>

  <!--  这样就可以直接使用组件了-->
</template>

<script>
  import fotter from "./fotter";
  import NavMenu from "../views/navMenu";
  import Head from "../views/user/head";
  //这个会直接帮我们导入进来
  //我是一个组件 我们想使用别人的组件 那么我就要将这个组件注册过来进行使用和开发
  export default {
    name: "Home",
    components: {
      Head,
      NavMenu,
//实现了组件的复用
      fotter,//注册组件(这里如果想使用别的组件的话
      // 我们就可以在这里进行我们的组件的引入 然后书写标签就先)

    },
    //这个是管理我们的数据区域
    data() {
      return {}

    },
    methods: {
      exit() {
        console.log('退出')
        //这一个指令可以使你的token直接过期(这个是我们的路由操作)
        localStorage.removeItem("token");
        this.$router.push("/login");//这个是将我们的路由进行跳转处理

      }
    },
    created() {
      // console.log(localStorage.getItem("name"))
    }

  }
</script>


<style scoped="scoped">

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 10px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
